<template>
	<view class="fx-numbox">
		<view class="">
			<view @tap="_calcValue('minus')" :class="value==min?'icon-color-no': 'icon-color-yes'"  class="icon iconfont icon-icon_ban" ></view>
		</view>
		<view v-if="unit" class="fx-numbox__value_unit">
			<input class="" type="digit" v-model="value" @blur="_onBlur" @input="onInput" :disabled="true">
			<text style=" margin-right: 5px;"> {{unit}}</text>
		</view>
	
		<input v-else class="fx-numbox__value" type="digit" v-model="value" @blur="_onBlur" @input="onInput" :disabled="true">
		
		<view class="">
			<view  :class="inputVvaluealue==max||isPlusDis?'icon-color-no': 'icon-color-yes'"  @tap="_calcValue('plus')" class="icon iconfont icon-ic_picture" ></view>
		</view>
	</view>
</template>
<script>

	var timer = null;
	export default {
		name: 'fx-number-box',
		props: {
			value: {
				type: Number,
				default: 0
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 99
			},
			step: {
				type: Number,
				default: 1
			},
			index: {
				type: Number,
				default: 0
			},
			isPlusDis: {
				type: Boolean,
				default: false
			},
			unit:  {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				inputValue: 0
			}
		},
		watch: {
			value(val) {
				// this.inputValue = val;
				
			}
		},
		methods: {
			_calcValue(type) {
				
				let value = this.inputValue 
				let step = this.step 
				if (type === 'minus') {
					value -= step
					if (value < this.min) {
						value = this.min
					}
				   this.$emit('minus', value, this.index);
				} else if (type === 'plus') {
					if(this.isPlusDis) return
					value += step
					if (value > this.max) {
						value = this.max
					}
					this.$emit('add', value, this.index);
				}
				
				this.inputValue = value
		
				
				this.$emit('change', value, this.index);
			},
			onInput(e){
				// this.inputValue = Math.floor(Number(e.detail.value).toFixed(1)*10)/10;
				// this.$emit('change', this.inputValue,this.index);
			},
	

			_onBlur(event) {
				// let value = event.detail.value
				// if (!value) {
				// 	this.inputValue = 0
				// 	return
				// }
				// value = +value;
				// if (value > this.max) {
				// 	value = this.max
				// } else if (value < this.min) {
				// 	value = this.min
				// }
				// this.inputValue = value
			}
		},
		created() {
			this.inputValue = +this.value;
		}
	}
</script>
<style lang="scss">
	.fx-numbox {
		display: inline-flex;
		flex-direction: row;
		justify-items: center;
		height:60rpx;
		position: relative;
		align-items: center;
		
		&__minus,
		&__plus {
			margin: 0;
			width:60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				width: 40rpx;
				height: 40rpx;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				pointer-events: none;
			}
		}

		&__value {
			width: 31px;
			height:60rpx;
			text-align: center;
			padding: 0;
		}
		&__value_unit {
			width: 40px;
			height:60rpx;
			text-align: center;
			display: flex;
			align-items: center;
			padding: 0;
		}
	}
	.icon-color-yes{
		font-size: 24px;
		color: rgb(40, 125, 250);
	}
	.icon-color-no{
		font-size: 24px;
		color: rgb(206, 210, 217);;
	}
</style>
